<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线升级</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//cdn.staticfile.org/layui/2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        body {
            background-color: #f2f2f2;
        }

        .console {
            height: 100%;
            background-color: #3F3F3F;
            color: #eee;
            font-size: 12px;
            padding: .5rem;
        }

        .ota-console {
            max-width: 600px;
            max-height: 400px;
        }

    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="ota-info">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form">
                <blockquote class="layui-elem-quote">在线升级</blockquote>
                <div class="layui-form-item">
                    <label class="layui-form-label">当前版本:</label>
                    <div class="layui-input-block">
                        <input type="text" name="current_version" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最新版本:</label>
                    <div class="layui-input-block">
                        <input type="text" name="version" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新版特性:</label>
                    <div class="layui-input-block">
                        <textarea name="message" class="layui-textarea" readonly></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" onclick="init()">检查更新</button>
                        <button id="update" class="layui-btn" lay-submit lay-filter="submit">立即更新</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script src="//cdn.staticfile.org/layui/2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/common.js" charset="utf-8"></script>
<script src="../js/api.js" charset="utf-8"></script>
<script>

    const init = () => {
        layer.load(1)
        let tasks = []
        tasks.push(
            httpGet('/admin/update/check').then(res => {
                if (res.status === 'ok') {
                    let release = res.data;
                    layui.form.val('ota-info', release)
                    if (release.current_version === release.version) {
                        $('#update').hide()
                    } else {
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: false,
                            area: '300px;',
                            shade: 0.8,
                            id: 'ota_check',
                            btn: ['立即更新', '残忍拒绝'],
                            btnAlign: 'c',
                            moveType: 1,
                            content: `<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">发现有新版本发布</div>`,
                            yes: function (index) {
                                $('#update').click();
                                layer.close(index);
                            }
                        });
                        $('#update').show()
                    }
                }
            }))
        Promise.all(tasks).finally(() => {
            layer.closeAll('loading')
        })
    }
    const writeln = (message) => {
        let html = $('#console').html();

        message = message.replaceAll("\n", '<br/>')
        message = `[${dateFormat(new Date())}] ${message}`
        html = html + '<br/>' + message
        html = html.replace(/^<br[\s]*\/>+|<br[\s]*\/>+$/g, '');
        $('#console').html(html);

    }
    const openConsole = () => {
        layer.open({
            type: 1,
            title: '在线更新',
            area: ['85vw', '400px'],
            skin: 'ota-console',
            shade: 0.8,
            id: 'ota_update',
            content: `<div class="console" id="console"></div>`,
            yes: function (index) {
                $('#update').click();
                layer.close(index);
            }
        });
    }
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        init();
        //监听提交
        form.on('submit(submit)', function (data) {
            layer.load(1)
            openConsole();
            writeln('开始更新~')
            let tasks = [
                httpGet('/admin/update/update'),
                httpGet('/admin/update/database'),
                httpGet('/admin/update/script'),
            ];
            const run = async function () {
                for (let task of tasks) {
                    const res = await task()
                    writeln(res.message)
                    if (res.status !== 'ok') {
                        writeln('终止更新~')
                        break;
                    }
                }
            }
            try {
                run().then(() => writeln('更新完毕~'))
            } finally {
                layer.closeAll('loading')
            }
            return false;
        });

    });
</script>
</body>
</html>